<template>
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        数据分析
        <small>分析仓库数据</small>
      </h1>
      <ol class="breadcrumb">
        <li class="active"><a href="#"><i class="fa fa-pie-chart"></i> 数据分析</a></li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box box-primary">
            <div class="box-header">
              <h3 class="box-title">数据分析</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <div class="col-xs-12">
                <label for="start-datetime">起始日期</label>
                <div class="input-group date form_date" data-date-format="dd MM yyyy" data-link-format="yyyy-mm-dd" data-link-field="dtp_input1">
                  <input type="text" class="form-control" placeholder="设置起始日期" id="start-datetime">
                  <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
              </div>

              <div class="col-xs-12">
                <label for="end-datetime">终止日期</label>
                <div class="input-group date form_date" data-date-format="dd MM yyyy" data-link-format="yyyy-mm-dd" data-link-field="dtp_input2">
                  <input type="text" class="form-control" placeholder="设置终止日期" id="end-datetime">
                  <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
              </div>
            </div>

            <div class="box-footer">
              <div>
                <button @click="setDate" class="btn btn-primary">确定</button>
              </div>
            </div>
          </div>
        </div>
      </div>




      <div class="row hidden" id="charts">
        <div class="col-xs-12">
          <!-- LINE CHART -->
          <div class="box box-info">
            <div class="box-header with-border">
              <h3 class="box-title">每日出入库的商品总数</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
              </div>
            </div>
            <div class="box-body">
              <div class="chart" id="io-lineChartContainer">
                <canvas id="io-lineChart" style="height:250px"></canvas>
              </div>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->

        </div>
        <!-- /.col (LEFT) -->
        <div class="col-xs-12">
          <!-- AREA CHART -->
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">每日新增的订单数量</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
              </div>
            </div>
            <div class="box-body">
              <div class="chart" id="order-barChartContainer">
                <canvas id="order-barChart" style="height:250px"></canvas>
              </div>
            </div>
            <!-- /.box-body -->
          </div>

        </div>
        <div class="col-xs-12">
          <!-- LINE CHART -->
          <!-- DONUT CHART -->
          <div class="box box-danger">
            <div class="box-header with-border">
              <h3 class="box-title">起止日期间销售出去的各类商品数量占比（前8种）</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
              </div>
            </div>
            <div class="box-body">
              <div id="product-pieChartContainer">
                <div id="product-pieChart" style="height: 300px"></div>
              </div>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->

        </div>
        <!-- /.col (RIGHT) -->
      </div>
      <!-- /.row -->

    </section>
    <!-- /.content -->
  </div>
</template>

<script>
export default {
  name: "Analysis",
  data(){
    return {
      labelsList: [],
      inData: [],
      outData: [],
      orderIncreaseData: [],
      pieValueList: [],
      pieLabelList: [],
      pieData: []
    }
  },
  mounted() {
    $(document).ready(function () {
      // 选择框
      $(".select2").select2();

      // WYSIHTML5编辑器
      $(".textarea").wysihtml5({
        locale: 'zh-CN'
      });
    });

    $('.form_date').datetimepicker({
      language : 'zh-CN',
      format : 'yyyy-mm-dd',
      weekStart: 1,
      todayBtn:  1,
      autoclose: 1,
      todayHighlight: 1,
      startView: 2,
      forceParse: 0,
      minView: 2
    });
  },
  methods:{
    setDate(){
      let startTime = document.getElementById("start-datetime");
      let endTime = document.getElementById("end-datetime");
      if(startTime.value===""||endTime.value===""){
       this.$message.warning("起始日期、终止日期不能为空！");
      }else {
        let msg = this.GLOBAL.appData.analyseData;
        this.labelsList = msg['data']['dateList'];
        this.inData = msg['data']['inData'];
        this.outData = msg['data']['outData'];
        this.orderIncreaseData = msg['data']['orderIncreaseData'];
        this.pieValueList = msg['data']['pieValueList'];
        this.pieLabelList = msg['data']['pieLabelList'];
        this.pieData = [
          {
            value: this.pieValueList[0],
            color: "#f56954",
            label: this.pieLabelList[0]
          },
          {
            value: this.pieValueList[1],
            color: "#00a65a",
            label: this.pieLabelList[1]
          },
          {
            value: this.pieValueList[2],
            color: "#f39c12",
            label: this.pieLabelList[2]
          },
          {
            value: this.pieValueList[3],
            color: "#00c0ef",
            label: this.pieLabelList[3]
          },
          {
            value: this.pieValueList[4],
            color: "#3c8dbc",
            label: this.pieLabelList[4]
          },
          {
            value: this.pieValueList[5],
            color: "#d2d6de",
            label: this.pieLabelList[5]
          },
          {
            value: this.pieValueList[6],
            color: "#bf68ea",
            label: this.pieLabelList[6]
          },
          {
            value: this.pieValueList[7],
            color: "#f3d309",
            label: this.pieLabelList[7]
          }
        ];
        this.setCharts();
      }
    },
    setCharts() {
      $("#charts").attr("class","row");
      $("#io-lineChart").remove();
      $("#order-barChart").remove();
      $("#product-pieChart").remove();
      $("#io-lineChartContainer").append("<canvas id=\"io-lineChart\" style=\"height:250px\"></canvas>");
      $("#order-barChartContainer").append("<canvas id=\"order-barChart\" style=\"height:250px\"></canvas>");
      $("#product-pieChartContainer").append("<div id=\"product-pieChart\" style=\"height: 300px\"></div>");

      var lineChartData = {
        labels: this.labelsList,
        datasets: [
          {
            label: "入库商品总数",
            fillColor: "rgba(210, 214, 222, 1)",
            strokeColor: "rgba(210, 214, 222, 1)",
            pointColor: "rgba(210, 214, 222, 1)",
            pointStrokeColor: "#c1c7d1",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: this.inData
          },
          {
            label: "出库商品总数",
            fillColor: "rgba(60,141,188,0.9)",
            strokeColor: "rgba(60,141,188,0.8)",
            pointColor: "#3b8bba",
            pointStrokeColor: "rgba(60,141,188,1)",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(60,141,188,1)",
            data: this.outData
          }
        ]
      };

      var barChartData = {
        labels: this.labelsList,
        datasets: [
          {
            label: "新增订单",
            fillColor: "rgb(110,148,222)",
            strokeColor: "rgba(210, 214, 222, 1)",
            pointColor: "rgba(210, 214, 222, 1)",
            pointStrokeColor: "#c1c7d1",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: this.orderIncreaseData
          },
        ]
      };

      var chartOptions = {
        //Boolean - If we should show the scale at all
        showScale: true,
        //Boolean - Whether grid lines are shown across the chart
        scaleShowGridLines: false,
        //String - Colour of the grid lines
        scaleGridLineColor: "rgba(0,0,0,0.05)",
        //Number - Width of the grid lines
        scaleGridLineWidth: 1,
        //Boolean - Whether to show horizontal lines (except X axis)
        scaleShowHorizontalLines: true,
        //Boolean - Whether to show vertical lines (except Y axis)
        scaleShowVerticalLines: true,
        //Boolean - Whether the line is curved between points
        bezierCurve: true,
        //Number - Tension of the bezier curve between points
        bezierCurveTension: 0.3,
        //Boolean - Whether to show a dot for each point
        pointDot: true,
        //Number - Radius of each point dot in pixels
        pointDotRadius: 4,
        //Number - Pixel width of point dot stroke
        pointDotStrokeWidth: 1,
        //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
        pointHitDetectionRadius: 20,
        //Boolean - Whether to show a stroke for datasets
        datasetStroke: true,
        //Number - Pixel width of dataset stroke
        datasetStrokeWidth: 2,
        //Boolean - Whether to fill the dataset with a color
        datasetFill: true,
        //String - A legend template
        legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
        //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
        maintainAspectRatio: true,
        //Boolean - whether to make the chart responsive to window resizing
        responsive: true
      };


      //-------------
      //- LINE CHART -
      //--------------
      var lineChartCanvas = $("#io-lineChart").get(0).getContext("2d");
      // eslint-disable-next-line no-undef
      var lineChart = new Chart(lineChartCanvas);
      chartOptions.datasetFill = false;
      lineChart.Line(lineChartData, chartOptions);


      //-------------
      //- BAR CHART -
      //-------------
      var barChartCanvas = $("#order-barChart").get(0).getContext("2d");
      // eslint-disable-next-line no-undef
      var barChart = new Chart(barChartCanvas);
      barChartData.datasets[0].fillColor = "#00a65a";
      barChartData.datasets[0].strokeColor = "#00a65a";
      barChartData.datasets[0].pointColor = "#00a65a";
      var barChartOptions = {
        //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
        scaleBeginAtZero: true,
        //Boolean - Whether grid lines are shown across the chart
        scaleShowGridLines: true,
        //String - Colour of the grid lines
        scaleGridLineColor: "rgba(0,0,0,.05)",
        //Number - Width of the grid lines
        scaleGridLineWidth: 1,
        //Boolean - Whether to show horizontal lines (except X axis)
        scaleShowHorizontalLines: true,
        //Boolean - Whether to show vertical lines (except Y axis)
        scaleShowVerticalLines: true,
        //Boolean - If there is a stroke on each bar
        barShowStroke: true,
        //Number - Pixel width of the bar stroke
        barStrokeWidth: 2,
        //Number - Spacing between each of the X value sets
        barValueSpacing: 5,
        //Number - Spacing between data sets within X values
        barDatasetSpacing: 1,
        //String - A legend template
        legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
        //Boolean - whether to make the chart responsive
        responsive: true,
        maintainAspectRatio: true
      };

      barChartOptions.datasetFill = false;
      barChart.Bar(barChartData, barChartOptions);


      //-------------
      //- PIE CHART -
      //-------------
      // eslint-disable-next-line no-unused-vars,no-undef
      var donut = new Morris.Donut({
        element: 'product-pieChart',
        resize: true,
        data: this.pieData,
        hideHover: 'auto'
      });
    }
  }
}
</script>

<style scoped>

</style>
